<template>
  <div>
    <div class="pannel-card">
      <!-- 左侧图标控制左侧边栏显示/隐藏 -->
      <div
        v-if="state.leftIconFlag"
        @click="leftFn"
        class="leftShow fcc"
        :class="state.leftFlag ? '' : 'isHideLeft'"
      >
        <el-icon v-if="!state.leftFlag">
          <ArrowRightBold />
        </el-icon>
        <el-icon v-else>
          <ArrowLeftBold />
        </el-icon>
      </div>
      <div v-show="state.leftFlag" class="aside-left">
        <div class="leftContent">
          <el-scrollbar height="100%">
            <slot name="asideLeft">33</slot>
          </el-scrollbar>
        </div>
      </div>
      <main>
        <header v-if="state.headerFlag">
          <div ref="headerRef">
           <slot name="header"></slot>
          </div>
        </header>
        <article>
           <slot name="article"></slot>
        </article>
      </main>
    </div>
  </div>
  <!-- 底部图标控制底部边栏显示/隐藏 -->
    <div class="bottomIcon" v-if="state.bottomIconFlag" @click="bottomFn">
      <el-icon class="icons" v-if="state.arrowtopFlag">
        <ArrowUpBold />
      </el-icon>
      <el-icon class="icons" v-else>
        <ArrowDownBold />
      </el-icon>
    </div>
  <div class="pannel-bottom" v-show="state.bottomFlag">
    <bottommenu ref="bottomRef"
    @refreshData="refreshData"></bottommenu>
  </div>
</template>
<script setup>
import bottommenu from "./component/bottommenu.vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  leftIconFlag: {
    type: Boolean,
    default: false,
  },
  leftFlag: {
    type: Boolean,
    default: false,
  },
  bottomFlag: {
    type: Boolean,
    default: false,
  },
  bottomIconFlag:{
    type: Boolean,
    default: false,
  },
  bottomHeight:{
    type: String,
    default: "62px",
  },
  asideLeftWidth:{
    type: String,
    default: "0px",
  },
  headerFlag:{
    type: Boolean,
    default: false,
  }
});
let state = reactive({
  leftIconFlag: props.leftIconFlag,
  leftFlag: props.leftFlag,
  asideLeftWidth: props.asideLeftWidth,
  leftMargin: "0px",
  pannelHeight: `calc(100vh - 165px - ${props.bottomFlag ? props.bottomHeight : '0px'})`, //面板高度减去底部高度
  articleHeight: `calc(100vh - 200px - ${proxy.$refs["headerRef"]?.clientHeight+'px'} - ${props.bottomFlag ? props.bottomHeight : '0px'})`, //文章高度减去底部高度
  bottomFlag: props.bottomFlag,
  bottomHeight: props.bottomHeight,
  bottomIconFlag: props.bottomIconFlag,
  arrowtopFlag: false,
  headerFlag: props.headerFlag,
});
const leftFn = () => {
  state.leftFlag = !state.leftFlag;
  state.asideLeftWidth = state.leftFlag ? "200px" : "0px";
  state.leftMargin = state.leftFlag ? "16px" : "0px";
};
const bottomFn = () => {
console.log(proxy.$refs["headerRef"]?.clientHeight,'proxy.$refs["headerRef"]?.clientHeight')

  state.arrowtopFlag = !state.arrowtopFlag;
  state.bottomFlag = !state.bottomFlag;
  state.pannelHeight = `calc(100vh - 165px - ${state.bottomFlag ? state.bottomHeight : '0px'})`; //面板高度减去底部高度
    state.articleHeight = `calc(100vh - 200px - ${proxy.$refs["headerRef"]?.clientHeight+'px'} - ${state.bottomFlag ? props.bottomHeight : '0px'})`; //文章高度减去底部高度

};
const emit = defineEmits(["refreshData"]);
function refreshData() {
  emit("refreshData");
}
function kongxiantonghua(val) {
  // proxy.$refs["bottomRef"].state.hujiaoform.hjshebei = [val.userNumber];
  proxy.$refs["bottomRef"].state.hujiaoFlag = true;
  proxy.$refs["bottomRef"].state.kongxianhujiaoFlag = true;
  proxy.$refs["bottomRef"].shipinChakan(val.userNumber);
  proxy.$refs["bottomRef"].state.cameraDetails = val.listCameras?.[0];
}
function guaduanFn(item){
  proxy.$refs["bottomRef"].hangupCall(item);
}
defineExpose({
  state,
  // offWebsocket, //关闭websocket
  guaduanFn,
  kongxiantonghua,
  // thwebscoket,
});
onMounted(() => {
  if(state.leftFlag){
state.leftMargin='16px'
  }
  state.articleHeight = `calc(100vh - 200px - ${proxy.$refs["headerRef"]?.clientHeight+'px'} - ${state.bottomFlag ? props.bottomHeight : '0px'})`; //文章高度减去底部高度
})
</script>
<style lang="scss" scoped>
.pannel-card {
  position: relative;
  width: 100%;
  height: v-bind("state.pannelHeight");
  display: flex;
  // align-items: center;
  justify-content: space-between;
  .leftShow {
    position: absolute;
    cursor: pointer;
    top: 50%;
    left: 190px;
    width: 20px;
    height: 20px;
    z-index: 1000;
    border-radius: 50%;
    background-color: #2a84eb;
    color: #fff;
    text-align: center;
    padding-top: 1px;
  }
  .isHideLeft {
    left: -10px !important;
  }
  .aside-left {
    margin: 0;
    width: v-bind("state.asideLeftWidth");
    height: 100%;
    margin-right: v-bind("state.leftMargin");
    background: #fff;
    border-radius: 6px;
    .leftContent {
      width: calc(v-bind("state.asideLeftWidth"));
      height: 100%;
      overflow-x: auto;
    }
  }
  main {
    width: calc(100% - v-bind("state.asideLeftWidth") - v-bind("state.leftMargin"));
    position: relative;
    transition: width 0.8s !important;
    // background-color: #fff;
    border-radius: 6px;
    header {
      background-color: #fff;
      border-radius: 6px;
      // margin-bottom: v-bind("state.leftMargin");
      margin-bottom: 16px;
      min-height: 50px;
      width: 100%;
      padding: 10px;
      white-space: wrap;
    }
    article {
      background-color: #fff;
      border-radius: 6px;
      height: v-bind("state.articleHeight");
      padding: 10px;
      width: 100%;
    }
  }
}
.bottomIcon {
  width: 120px;
  height: 19px;
  background-color: #2A84EB;
  margin: 0 auto;
  border-radius: 12px 12px 0 0;
  text-align: center;
  padding-top: 2px;
  cursor: pointer;
  .icons {
    color: #fff;
  }
}
  .pannel-bottom {
    width: 100%;
    height: v-bind("state.bottomHeight");
    padding-top: 16px;
    border-radius: 6px 6px 0 0;
    background: #fff;
  }
</style>